<template>
  <div class='container'>
     <!-- 新增\修改 弹出层 -->
    <el-dialog :title="title" :visible="isShow" @close="dialogCancel" width="870px" >
       <el-form ref="addForm" :rules="rules" :model="dialogForm" label-width="100px">
         <el-form-item label="文章标题:" prop="title" >
           <el-input v-model="dialogForm.title" ></el-input>
         </el-form-item>
         <el-form-item label="文章内容:" prop="articleBody" >
          <!-- <el-input type="textarea" :rows="6" placeholder="请输入内容:" v-model="dialogForm.articleBody" /> -->
          <!-- :options="editorOption" 自定义编辑器选项 -->
          <quill-editor class="ql-editor"  v-model="dialogForm.articleBody" :options="editorOption"  ref="myQuillEditor" > </quill-editor>
         </el-form-item>
         <el-form-item label="视频地址:" prop="videoURL" >
           <el-input v-model="dialogForm.videoURL" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogCancel">取 消</el-button>
         <el-button type="primary" @click="dialogOk">确 定</el-button>
       </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/articles.js'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css'

export default {
  props: {
    dialogForm: {
      type: Object,
      default: null
    },
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    }
  },
  components: {
    quillEditor
  },
  data () {
    return {
      // 校验
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        articleBody: [{ required: true, message: '标题不能为空', trigger: 'blur' }]
      },
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            ['image', 'video'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  methods: {
    // 弹窗确定按钮
    async dialogOk () {
      // 校验
      await this.$refs.addForm.validate(async isOK => {
        if (isOK) {
          if (this.title === '新增文章') {
            // 调用接口
            await add(this.dialogForm)
            this.$message.success('新增成功')
          } else {
            await update(this.dialogForm)
            this.$message.success('修改成功')
          }
          this.$parent.getArticlesList()
          this.$parent.updateForm()
          this.$refs.addForm.resetFields()
          // this.isShow = false
          this.$emit('update:isShow', false)
        }
      })
    },

    // 弹窗取消按钮
    dialogCancel () {
      this.$parent.updateForm()
      this.$refs.addForm.resetFields()
      // this.isShow = false
      this.$emit('update:isShow', false)
    }
  }

}
</script>

<style scoped >
/* 编辑器初始高度 */
.ql-editor{
         height:200px;
     }

</style>
